<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link href="assets/bootstrap-3.3.7-dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="assets/css/right.css" rel="stylesheet">
    <script src="assets/jquery-3.5.1.min.js"></script>
    <script src="assets/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
    <script src="assets/vue.min-v2.5.16.js"></script>
    <script src="assets/vue-router.min-2.7.0.js"></script>
    <script src="assets/axios.min.js"></script>
    <script src="assets/date_picker.js"></script>
</head>
<body>
    <div id="app" class="container">
        <div class="row">
            <div class="col-md-8 col-md-offset-2">
                <div class="row" >
                    <div class="col-md-6 col-md-offset-3" style="height: 80px;margin-top: 10px;margin-bottom: 20px">
                        <h2>添加报修信息</h2>
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-6 col-md-offset-3" style="height: 80px;">
                        <label>添加报修信息</label>
                        <select v-model="comId" class="form-control">
                            <option value="null">请选择报修信息</option>
                            <option :value="t.id" v-for="t in typeList">{{t.name}}</option>
                        </select>
                    </div>
                </div>

                <div class="row">
                    <div class="col-md-6 col-md-offset-3" style="height: 80px;">
                        <label>报修内容</label>
                        <input type="text" class="form-control" v-model="remarks"/>
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-6 col-md-offset-3" style="height: 80px;">
                        <label>报修人</label>
                        <select v-model="ownerId" class="form-control">
                            <option value="null">请选择报修人</option>
                            <option :value="u.id" v-for="u in userList">{{u.username}}</option>
                        </select>
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-6 col-md-offset-3" style="height: 80px;">
                        <label>报修时间</label>
                        <input type="datetime-local" class="form-control" v-model="comDate"/>
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-6 col-md-offset-3" style="height: 80px;">
                        <label>处理状态</label>
                        <select v-model="status" class="form-control">
                            <option value="0">未处理</option>
                            <option value="1">已处理</option>
                        </select>
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-6 col-md-offset-3" style="height: 80px;">
                        <label>处理人</label>
                        <input type="text" class="form-control" v-model="clr"/>
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-6 col-md-offset-3" style="height: 80px;">
                        <button class="btn btn-primary" @click="doSave">保存</button>
                        <button class="btn btn-default" @click="doCancel">取消</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script>
        new Vue({
            el: '#app',
            data: {
                typeList:null,//用来装所有报修类型
                userList:null,//用来装所有业主信息
                comId:null,//报修类型对应的id
                remarks:null,//报修内容
                ownerId:null,//业主id
                comDate:null,//报修时间
                status:null,//维修的状态
                clr:null,//处理故障的人员
            },
            methods: {
                requestRepairType(){
                    var uid = localStorage.getItem("uid");
                    var url ="http://localhost:8080/repair/rtlist?uid="+uid;
                    axios.get(url).then(response =>{
                        console.log(response.data.data);
                        this.typeList = response.data.data;//给类型列表赋值
                    });
                },
                requestOwner(){
                    var uid = localStorage.getItem("uid");
                    var url ="http://localhost:8080/repair/ownerlist?uid="+uid;
                    axios.get(url).then(response =>{
                        console.log(response.data.data);
                        this.userList = response.data.data;//给类型列表赋值
                    });
                },
                doSave(){
                    var uid = localStorage.getItem("uid");
                    axios.post("http://localhost:8080/repair/insert?uid="+uid,{
                        comId:this.comId,
                        remarks:this.remarks,
                        ownerId:this.ownerId,
                        comDate:this.comDate,
                        status:this.status,
                        clr:this.clr,
                    }).then(response =>{
                        if (response.data.code == 200){//添加成功
                            window.parent.main_right.location.href="repair_list.html";
                        }else{//添加失败
                            alert(response.data.msg)
                        }
                    })
                },
                doCancel(){
                    history.go(-1);
                }
            },
            created: function () {
                this.requestRepairType();
                this.requestOwner();


            }
        });
    </script>
</body>
</html>